<#include "../../layout.ftl">
<@title>
    <title>部门管理</title>
</@title>
<@css>

</@css>
<@layout>
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="menu-form">
                    <div class="select-list">
                        <ul>
                            <li>
                                名称：<input type="text" name="deptName" id="deptName"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="query(1);"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="query(0);"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="btn-group-sm" role="group" id="toolbar">
                <a class="btn btn-success" onclick="add();" data-role="admin:dept:add">
                    <i class="fa fa-plus"></i> 新增
                </a>
                <a class="btn btn-primary" onclick="edit(this);" data-id="0" data-role="admin:dept:edit">
                    <i class="fa fa-edit"></i> 修改
                </a>
                <a class="btn btn-danger" onclick="removeAll(this);" data-id="0" data-role="admin:dept:delete">
                    <i class="fa fa-remove"></i> 删除
                </a>
                <a class="btn btn-info"  onclick="expandAll();" data-role="0">
                    <i class="fa fa-exchange"></i> 展开/折叠
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="dataTable"></table>
            </div>
        </div>
    </div>
</@layout>

<@js>

    <script layout:fragment="script">
        let $table;
        $(function () {
            loadData();

        });

        function loadData() {
            var options = {
                id:'dataTable',
                url: '/admin/dept/getDeptTree',
                code: "id",
                parentCode: "parentId",
                uniqueId: "id",
                toolbar: '#toolbar',
                rootIdValue:'0',
                striped: false,
                expandColumn: 1,
                showSearch: true,
                showRefresh: true,
                showColumns: true,
                expandAll: true,
                expandFirst: true,
                method:'post',
                columns: [
                    {field: 'selectItem', radio: true},
                    {
                        field: 'deptName', title: '名称',align: "left",width: '20%'
                    },
                    {field: 'leader', title: '负责人', align: "center"},

                    {field: 'phone', title: '联系电话', align: "center"},
                    {field: 'email', title: '邮箱', align: "center"},
                    {field: 'orderNum', title: '排序', align: "center"},
                    {field: 'deptType', title: '分类', align: "center",formatter:function(v,r,i){
                            if(v==='0'){
                                if(r.parentId==='0'){
                                    return '<span class="badge badge-primary">总公司</span>';
                                }
                                return '<span class="badge badge-primary">分公司</span>';
                            }
                            return '<span class="badge badge-success">部门</span>';
                        }},
                    {field: 'createTime', title: '创建时间', align: "center"},
                    {
                        field: 'id',title: '操作', align: "center", formatter: renderOperationButton
                    }
                ],
                onLoadSuccess: function (data) {
                    // console.log('from data load ok');
                    // console.log(data);
                }
            }

            //$table = $.treeTable.init(options);
            $table = $("#dataTable").easyTreeTable(options);
        }


        function renderOperationButton(value, row, index) {
            var actions = [];
            actions.push({
                roleTag:'system:dept:edit',
                button:'<a class="btn btn-success btn-xs" href="javascript:void(0);" onclick="edit(this);" data-id="' + value + '"><i class="fa fa-edit"></i>编辑</a>'
            });
            actions.push({
                roleTag:'system:dept:delete',
                button:'<a class="btn btn-danger btn-xs" href="javascript:void(0);" onclick="removeAll(this);" data-id="' + value + '"><i class="fa fa-trash"></i>删除</a>'
            });

            return jutils.buttonPermission(actions);
        }

        function add(){
            jutils.dialogAuto("添加部门",'/admin/dept/form',{id:0},function(){
                $table.easyTreeTable('search');
            });
        }

        function edit(obj) {
            let dataId = $(obj).data('id');
            if(dataId =='0'){
                let rows=$table.easyTreeTable('selected');
                if(rows.length==0){
                    jutils.error("请选择数据行");
                    return;
                }
                dataId=rows[0].id;
            }
            jutils.dialogAuto("修改部门",'/admin/dept/form',{id:dataId},null,function(){
                $table.easyTreeTable('search');
            });
        }

        function query(flag){
            if(flag==0){
                $('#deptName').val('');
            }

            $table.easyTreeTable('search',{deptName:$('#deptName').val()});
        }
        function removeAll(obj) {
            let dataId = $(obj).data('id');
            if(dataId =='0'){
                let rows=$table.easyTreeTable('selected');
                if(rows.length==0){
                    jutils.error("请选择数据行");
                    return;
                }
                dataId=rows[0].id;
            }
            jutils.confirm("确认删除部门数据吗？",function(){
                jutils.ajaxGet('/admin/dept/delete',{id:dataId},function (res){
                    //$table.bootstrapTreeTable('refresh');
                    if(res.status){
                        $table.easyTreeTable('search');
                    }

                });
            });

        }
        function expandAll(){
            $table.easyTreeTable('expandAll');
        }
    </script>
</@js>
